<style>
    #orderDetail {
        color: #666;
    }

    .order-title {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        font-weight: 600;
        padding: 0 20px;
    }

    .order-msg,
    .ordergoods-msg {
        display: flex;
        padding: 20px;
    }

    .order-msg>div {
        width: 33.3%;
        /* height: 20px; */
        line-height: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }


    .ordergoods-msg>div {
        width: 33.3%;
        line-height: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .ordergoods-msg .ordergoods-img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
    }

    .span-tit {
        /* width: 80px; */
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        color: #111;
    }

    .doubleRow {
        display: flex;

    }

    .doubleRow>p {
        width: 50%;
    }

    .order-msg-right {
        /* display: flex;
        align-items: center;
        justify-content: center; */
    }

    .order-msg-status {
        width: 100px;
        display: inline-block;
        font-size: 20px;
        color: #000000d9
    }

    .titles {
        font-size: 12px;
        color: #00000073;
    }

    input {
        height: 30px;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 0 12px;
    }

    .selfPopover {
        position: relative;
        display: inline-block;
    }


    .selfPopoverCon {
        position: absolute;
        left: 66px;
        top: -40px;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .selfPopoverShow {
        display: block;
        position: absolute;
        left: 66px;
        top: -45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .selfPopoverConHorn {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent #eee transparent transparent;
    }

    .selfPopoverConBody {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        background: #fff;
        padding: 10px 20px;
    }

    .selfPopoverConInput {
        height: 30px;
        line-height: 30px;
        margin: 10px 0;
        width: 160px;
    }

    .selfPopoverConTit {
        font-size: 14px;
    }

    .selfPopoverConBodyBtn {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0;
    }

    .activityType {
        display: inline-block;
        padding: 0 5px;
        background: #f39800;
        color: #fff;
        border-radius: 3px;
    }

    .btn {
        margin-left: 20px;
    }
.popover-cancel{
    margin-right: 10px;color: #3498db;
}
.send-btn{
    width: 194px;text-align: left;
}
.status-success{
    color:#18bc9c;
    font-size: 20px;
}
.status-danger{
    color:#e74c3c;
    font-size: 20px;

}
.orderWarp{
    padding: 0 0 24px;
    border: 1px solid #eee;
    margin-top: 10px;
}
.order-line{
height: 55px;
line-height: 55px;
background: #f6f6f6;
}
.sPrice{
    margin-left: 10px;
}
.allSends{
    width: 194px;text-align: right;
}
    [v-cloak] {
        display: none
    }
</style>
<div id="orderDetail" v-cloak>
    <div class="order-title">订单信息</div>
    <div class="order-msg">
        <div>
            <div><span class="span-tit">订单号:</span><span>{{orderDetail.order_sn}}</span></div>
            <div><span class="span-tit">用户:</span><span>{{orderDetail.user.username}}</span></div>
            <div><span class="span-tit">创建时间:</span><span>{{orderDetail.createtime | formatDate}}</span></div>
            <div><span class="span-tit">支付时间:</span><span>{{orderDetail.paytime_text}}</span></div>
        </div>
        <div>
            <div><span class="span-tit">支付方式:</span><span>{{orderDetail.pay_type_text}}</span></div>
            <div><span class="span-tit">支付平台:</span><span>{{orderDetail.platform_text}}</span></div>
            <div><span class="span-tit">用户备注:</span><span>{{orderDetail.remark}}</span></div>

        </div>
        <div class="order-msg-right">
            <div>
                <div><span class="span-tit">支付状态:</span>
                    <span :class="orderDetail.status>0?'status-success':'status-danger'">{{orderDetail.status_text}}</span>
                    
                </div>
                <div>
                    <span class="span-tit">商品总金额:</span>
                    <span>￥{{orderDetail.goods_amount}}</span>
                </div>
                <div v-if="orderDetail.discount_fee>0">
                    <span class="span-tit">优惠金额:</span>
                    <span>-￥{{orderDetail.discount_fee}}</span>
                </div>
                <div v-if="orderDetail.type=='score'">
                    <span class="span-tit">积分:</span>
                    <span>{{orderDetail.score_amount}}</span>
                </div>
                <div>
                    <span class="span-tit">运费:</span>
                    <span>￥{{orderDetail.dispatch_amount}}</span>
                </div>
                <div>
                    <span class="span-tit">实付金额:</span>
                    <span style="color:#e74c3c">￥{{orderDetail.pay_fee}}</span>
                </div>
            </div>

        </div>

    </div>
    <div class="order-title">发货信息</div>
    <div class="order-msg">
        <div>
            <div><span class="span-tit">收货人:</span><span>{{orderDetail.consignee}}</span></div>
            <div><span class="span-tit">电话:</span><span>{{orderDetail.phone}}</span></div>
        </div>
        <div>
            <div><span class="span-tit">地址:</span><span>{{orderDetail.province_name}}-{{orderDetail.city_name}}-{{orderDetail.area_name}}-{{orderDetail.address}}</span></div>
        </div>
        <div class="order-msg-right" v-if="isexpress">
            <div>
                <p><input type="text" placeholder="请输入快递公司" v-model="express_name"></p>
                <p><input type="text" placeholder="请输入快递单号" v-model="express_no"></p>
                <p class="allSends"><button class="btn btn-xs btn-info"
                        :disabled="!express_no || !express_name"
                        @click="sendGoods(orderDetail.id,0,null)">统一发货</button></p>
            </div>
        </div>

    </div>
    <div class="orderWarp" v-for="(item,index) in orderGoodsList">
        <div class="order-title order-line">商品信息</div>
        <div class="ordergoods-msg">
            <div>
                <img class="ordergoods-img" :src="item.goods_image" alt="" srcset="">

            </div>
            <div>
                <div><span class="span-tit">标题:</span><span>{{item.goods_title}}</span><span
                        class="activityType">{{item.activity_type_text}}</span></div>
                <div>
                    <p>
                        <span class="span-tit">价格:</span>
                        <span>￥{{item.goods_price}}</span>
                        <s class="sPrice">{{item.goods_original_price}}</s>
                    </p>
                </div>
            </div>
            <div>
                <p><span class="span-tit">规格:</span><span>{{item.goods_sku_text}}</span></p>
                <p><span class="span-tit">数量:</span><span>{{item.goods_num}}</span></p>
            </div>
        </div>
        <div class="order-title">物流状态</div>
        <div class="ordergoods-msg">
            <div>
                <div><span class="span-tit">发货状态:</span><span>{{item.dispatch_status_text}}</span></div>
                <div><span class="span-tit">评价:</span><span>{{item.comment_status_text}}</span><button
                        v-show="item.comment_status==1" class="btn btn-xs btn-info viewEvaluation"
                        :data-id="item.id">查看评价</button></div>
            </div>
            <div><span class="span-tit" v-show="item.refund_status<=1">退款状态:</span><span v-show="item.refund_status<=1">{{item.refund_status_text}}</span>
                <span class="span-tit" v-show="item.refund_status>=2">退款金额:</span><span v-show="item.refund_status>=2">￥{{item.refund_fee}}</span>
                <div class="selfPopover" v-show="item.refund_status==1">
                    <button class="btn btn-xs btn-danger" @click="goSelfPopover(index)">点击退款</button>
                    <div class="selfPopoverCon" :class="'selfPopoverCon'+index">
                        <div class="selfPopoverConHorn"></div>
                        <div class="selfPopoverConBody">
                            <input class="selfPopoverConInput" type="text" v-model="refund_money" placeholder="请输入退款金额">
                            <div class="selfPopoverConBodyBtn">
                                <span class="popover-cancel" @click="popoverCancel(index)">取消</span>
                                <button class="btn btn-xs btn-info"
                                    @click="popoverReal(item.order_id,item.id,index)">确定</button></div>
                        </div>
                    </div>
                </div>
            </div>
            <div><span class="span-tit">售后:</span><span>{{item.aftersale_status_text}}</span><button
                    class="btn btn-xs btn-info" v-show="item.aftersale_status==1"
                    @click="finishService(item.order_id,item.id)">售后完成</button></div>
        </div>
        <div class="order-title" v-show="item.dispatch_type=='express'">物流公司</div>
        <div class="ordergoods-msg" v-show="item.dispatch_type=='express' && item.dispatch_status!=0">
            <div><span class="span-tit">物流公司:</span><span>{{item.express_name}}</span></div>
            <div><span class="span-tit">物流单号:</span><span>{{item.express_no}}</span></div>
        </div>
        <div class="ordergoods-msg" v-show="item.dispatch_type=='express' && item.dispatch_status==0">
            <div><span class="span-tit">物流公司:</span><input type="text" v-model="item.express_name" placeholder="请输入快递公司">
            </div>
            <div><span class="span-tit">物流单号:</span><input type="text" v-model="item.express_no" placeholder="请输入快递单号">
            </div>
            <div class="send-btn"><button :disabled="!item.express_no || !item.express_name"
                    @click="sendGoods(item.order_id,item.id,index)" class="btn btn-xs btn-info">发货</button></div>
        </div>
    </div>
</div>